<template>
  <div>
    <!-- 
      在浏览器上获取水平坐标和垂直坐标  pageX  pageY
      event的数据类型  是  MouseEvent

     -->

     <h1>x的坐标{{ x }}</h1>
     <h1>y的坐标{{ y }}</h1>

  </div>
</template>

<script lang="ts">
import { defineComponent,onMounted, onUnmounted, ref } from 'vue'

export default defineComponent({
  setup () {
    //没有x，y  造x，y 
    const x = ref(0);
    const y = ref(0);
    

    //绑定事件对应的回调函数
    const updatePosition = (e:MouseEvent) =>{
      x.value = e.pageX;
      y.value = e.pageY;
    };

    onMounted(() => {
      // 在此时是最早能操作DOM的时刻
      document.addEventListener("click", updatePosition);
    });

    //离开取消事件
    onUnmounted(()=>{
      document.removeEventListener("click",updatePosition)
    })


    return {
      x,
      y
    }
  }
})
</script>

<style scoped>

</style>